<template>
    <div class="container">
        <div class="centerMobile">
            <!-- <div class="action-bar">
                <el-button icon="el-icon-view" type="text" >
                    预览
                </el-button>
                 <el-button class="delete-btn" icon="el-icon-delete" type="text" >
                    清空
                </el-button>
            </div> -->
            <div class="miniApp">
                <div class="editor">
                    <div class="editor-caption">
                        <div class="arrow"></div>
                        <div class="editor-title-wrapper" style="margin-left: 40px;">登录</div>
                        <div class="nav-rightbtn-group">
                            <img :src="rightBtn" alt="">
                        </div>
                    </div>
                    <div class="appContent" :style="{backgroundImage: 'url(' + loginConf.bgUrl + ')', backgroundSize:'100% 100%'}">
                        <div class="contentForm">
                            <div class="iconStyle" v-if="loginConf.iconImg">
                                <van-image
                                    width="80"
                                    height="80"
                                    :src="loginConf.iconImg"
                                    />
                            </div>
                            <div class="formInfo" :style="{bottom: loginConf.formBottom+ 'px'}">
                                <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
                                    <el-form-item prop="tenantname" :style="{marginBottom: loginConf.spacing+'px'}">
                                        <el-select type="text"  placeholder="请选择租户" 
                                            :style="{ '--height-input': `${loginConf.inputHeight + 'px'}`,'--border-width': `${loginConf.isborder === 'yes' ? loginConf.borderWidth + 'px' : '0'}`,'--border-color': `${loginConf.borderColor}`,'--box-shadow': `${loginConf.boxShadow}`,'--border-radius': `${loginConf.borderRadius + 'px'}`,width:'100%'}"
                                            @change="handleCommand" v-model="active"
                                        >
                                           <i slot="prefix" class="el-icon-s-custom"></i>
                                           <el-option v-for="(item) in tenantList"
                                                :key="item.id"
                                                :label="item.name"
                                                :value="item.id">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item prop="username" :style="{marginBottom: loginConf.spacing+'px'}">
                                        <el-input type="text"  :placeholder="loginConf.usePlaceholder" 
                                            v-model="loginForm.username"
                                            :style="{ '--height-input': `${loginConf.inputHeight + 'px'}`,'--border-width': `${loginConf.isborder === 'yes' ? loginConf.borderWidth + 'px' : '0'}`,'--border-color': `${loginConf.borderColor}`,'--box-shadow': `${loginConf.boxShadow}`,'--border-radius': `${loginConf.borderRadius + 'px'}`}"
                                            >
                                            <i slot="prefix" :class="loginConf.useIcon"></i>
                                        </el-input>
                                    </el-form-item>
                                    <el-form-item prop="password" :style="{marginBottom: loginConf.spacing+'px'}">
                                        <el-input :type="passwordType"  
                                            v-model="loginForm.password" 
                                            :placeholder="loginConf.password" 
                                            :style="{ '--height-input': `${loginConf.inputHeight + 'px'}`,'--border-width': `${loginConf.isborder === 'yes' ? loginConf.borderWidth + 'px' : '0'}`,'--border-color': `${loginConf.borderColor}`,'--box-shadow': `${loginConf.boxShadow}`,'--border-radius': `${loginConf.borderRadius + 'px'}`}">
                                            <i slot="prefix" :class="loginConf.passIcon"></i>
                                            <i slot="suffix" class="el-icon-view"   @click="showPassword"/>
                                        </el-input>
                                    </el-form-item>
                                    <el-form-item prop="code">
                                        <Verify
                                            @success="verifySuccess"
                                            :mode="'pop'"
                                            :captchaType="'blockPuzzle'"
                                            :imgSize="{ width: '330px', height: '155px' }"
                                            ref="verify"
                                        />
                                    </el-form-item>
                                    <el-form-item style="width:100%;">  
                                        <el-button  type='button' size="medium" :disabled ="$store.state.mobile.userAgent==='pc'"
                                            @click.native.prevent="handleLogin" :style="{height: '32px',width: '100%',fontSize: loginConf.fontSizeName+'px',letterSpacing: loginConf.nameSpacing+'px',color: loginConf.nameColor,backgroundColor: loginConf.bgColor}" class="btnUpdata">
                                             {{loginConf.btnName}}
                                        </el-button>
                                    </el-form-item>
                                </el-form>
                            </div>
                            <div class="el-login-footer">
                                <span :style="{fontSize: loginConf.footerFontSize+'px',color: loginConf.footerColor}">{{loginConf.loginFooter}}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="rightMo">
            <div class="field-box">
               <div style="height: 100%">
                    <div class="el-scrollbar">
                        <div class="content">
                            <div class="title">属性设置</div>
                            <el-form  size="small" label-width="90px" class="scrollbar">
                                <el-form-item label="背景图片">
                                    <el-input placeholder="请上传背景图片"  size="small" v-model="loginConf.bgUrl"></el-input>
                                    <div class="updataBtn">
                                        <el-upload
                                        class="upload-demo"
                                        ref="upload"
                                        :action="uploadFileUrl"
                                        :file-list="fileList"
                                        :headers="{'Authorization':`Bearer ${token}`}"
                                        :on-success="handleUploadSuccess"
                                        :show-file-list="false">
                                        <el-button slot="trigger" size="small" type="primary">上传</el-button>
                                        <el-button style="margin-left: 10px;" size="small" type="danger" plain @click="remove" >清除</el-button>
                                    </el-upload>
                                    </div>
                                </el-form-item>
                                <el-form-item label="LOGO">
                                    <el-input placeholder="请上传LOGO"  size="small" v-model="loginConf.iconImg"></el-input>
                                    <div class="updataBtn">
                                        <el-upload
                                        class="upload-demo"
                                        ref="upload"
                                        :action="uploadFileUrl"
                                        :file-list="fileListLogo"
                                        :headers="{'Authorization':`Bearer ${token}`}"
                                        :on-success="handleUploadSuccessLogo"
                                        :show-file-list="false">
                                        <el-button slot="trigger" size="small" type="primary">上传</el-button>
                                        <el-button style="margin-left: 10px;" size="small" type="danger" plain @click="removeLogo" >清除</el-button>
                                    </el-upload>
                                    </div>
                                </el-form-item>
                            </el-form>
                        </div>
                        <div class="content">
                            <div class="title">账号密码登录</div>
                            <el-form  size="small" label-width="120px" class="scrollbar">
                                <el-form-item label="用户名提示信息">
                                    <el-input placeholder="请输入"  size="small" v-model="loginConf.usePlaceholder" ></el-input>
                                </el-form-item>
                                <el-form-item label="用户名图标">
                                    <el-input  placeholder="请输入" v-model="loginConf['useIcon']">
                                    <el-button slot="append" icon="el-icon-thumb" @click="openIconsDialog('useIcon')">
                                        选择
                                    </el-button>
                                    </el-input>
                                </el-form-item>
                                <el-form-item label="密码提示信息">
                                    <el-input placeholder="请输入"  size="small" v-model="loginConf.password" ></el-input>
                                </el-form-item>
                                <el-form-item label="密码图标">
                                    <el-input  placeholder="请输入" v-model="loginConf['passIcon']">
                                    <el-button slot="append" icon="el-icon-thumb" @click="openIconsDialog('passIcon')">
                                        选择
                                    </el-button>
                                    </el-input>
                                </el-form-item>
                                <el-form-item label="输入框区域距底部距离">
                                    <el-input placeholder="请输入"  size="small" type="number" v-model="loginConf.formBottom">
                                        <template slot="append">px</template>
                                    </el-input>
                                </el-form-item>
                                <el-form-item label="输入框高度">
                                    <el-input placeholder="请输入"  size="small"  type="number" v-model="loginConf.inputHeight">
                                        <template slot="append">px</template>
                                    </el-input>
                                </el-form-item>
                                <el-form-item label="输入框间距">
                                    <el-input placeholder="请输入"  size="small" type="number" v-model="loginConf.spacing">
                                        <template slot="append">px</template>
                                    </el-input>
                                </el-form-item>
                                <el-form-item label="按钮名称">
                                    <el-input placeholder="请输入"  size="small" v-model="loginConf.btnName"></el-input>
                                </el-form-item>
                                <el-form-item label="按钮名称字大小">
                                    <el-input placeholder="请输入"  size="small" type="number" v-model="loginConf.fontSizeName">
                                        <template slot="append">px</template>
                                    </el-input>
                                </el-form-item>
                                <el-form-item label="按钮名称字间距">
                                    <el-input placeholder="请输入"  size="small" type="number" v-model="loginConf.nameSpacing">
                                        <template slot="append">px</template>
                                    </el-input>
                                </el-form-item>
                                <el-form-item label="按钮名称颜色" >
                                    <el-color-picker  size="small" v-model="loginConf.nameColor"></el-color-picker>
                                </el-form-item>
                                <el-form-item label="按钮名称背景色" >
                                    <el-color-picker  size="small"  v-model="loginConf.bgColor"></el-color-picker>
                                </el-form-item>
                                <el-form-item label="页脚" >
                                    <el-input placeholder="请输入"  size="small" v-model="loginConf.loginFooter"></el-input>
                                </el-form-item>
                                <el-form-item label="页脚字体大小">
                                    <el-input placeholder="请输入"  size="small" type="number" v-model="loginConf.footerFontSize">
                                        <template slot="append">px</template>
                                    </el-input>
                                </el-form-item>
                                <el-form-item label="页脚字体颜色" >
                                    <el-color-picker  size="small" v-model="loginConf.footerColor"></el-color-picker>
                                </el-form-item>
                                <el-form-item label="边框宽度">
                                    <el-input placeholder="请输入"  size="small" type="number" v-model="loginConf.borderWidth">
                                        <template slot="append">px</template>
                                    </el-input>
                                </el-form-item>
                                <el-form-item label="边框阴影">
                                    <el-select placeholder="请选择" size="small" v-model="loginConf.boxShadow">
                                        <el-option label="是" value="rgb(204 204 204) 1px 1px 10px"></el-option>
                                        <el-option label="否" value="null"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="启用边框">
                                    <el-select placeholder="请选择" size="small" v-model="loginConf.isborder">
                                        <el-option label="是" value="yes"></el-option>
                                        <el-option label="否" value="no"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="边框颜色" >
                                    <el-color-picker  size="small" v-model="loginConf.borderColor"></el-color-picker>
                                </el-form-item>
                                <el-form-item label="边框圆角">
                                    <el-input placeholder="请输入"  size="small" type="number" v-model="loginConf.borderRadius">
                                        <template slot="append">px</template>
                                    </el-input>
                                </el-form-item>
                            </el-form>
                        </div>
                    </div>
               </div>
            </div>
        </div>
        <icons-dialog :visible.sync="iconsVisible"  @select="setIcon" />
    </div>
</template>

<script>

import rightBtn from '@/assets/images/rightBtn.png'
import IconsDialog from './IconsDialog'
import { loginConf } from './loginFormConfig'
import Vue from 'vue';
import { Image as VanImage } from 'vant';
import {getAccessToken, encryption} from '@/utils/auth'
import Verify from "@/components/verifition/Verify";
import { getTenantIdByName,  listLinshi} from "@/api/system/tenant";

Vue.use(VanImage);

export default {
    components: {
        IconsDialog,
        Verify
    },
    data() {
        return {
            active:'',
            token: '', //接口请求token
            loginConf: JSON.parse(JSON.stringify(loginConf)),
            rightBtn: rightBtn,
            iconsVisible: false,
            uploadFileUrl: process.env.VUE_APP_BASE_API + "/admin-api/infra/file/upload", // 请求地址
            fileList: [],
            fileListLogo: [],
            tenantList: [],
            loginForm: {
                username: "",
                password: "",
                code: "",
                uuid: "",
                tenantId: "",
            },
            passwordType: "password",
            loginRules: {
                username: [
                { required: true, trigger: "blur", message: "用户名不能为空" }
                ],
                password: [
                { required: true, trigger: "blur", message: "密码不能为空" }
                ],
            },
        }
    },
    mounted() {
      this.token =  getAccessToken()
    },
    created() {
        this.getTenantId();
    },
    methods: {
          showPassword() {
            this.passwordType == ""
                ? (this.passwordType = "password")
                : (this.passwordType = "");
            },
        handleLogin() {
            this.$refs.loginForm.validate(valid => {
                if (valid) {
                    this.$refs.verify.show();
                }
            });
        },
         verifySuccess(params) {
            this.loginForm.code = params.captchaVerification;
            this.loginForm.tenantId = this.active
            let password = encryption(this.loginForm.password)  //密码加密
            const data = {
                code: this.loginForm.code,
                password: password,
                tenantId: this.loginForm.tenantId,
                tenantName: '',
                username: this.loginForm.username
            }
            // 发起登陆
            this.$store.dispatch("LoginMini", data).then(() => {
                this.$router.push('/iphonePath')
            }).catch(() => {
            });
            },
         getTenantId() {
            // getTenantIdByName().then((res) => {
            listLinshi().then((res) => {
                this.tenantList = res.data
            })
        },
         handleCommand (command) {
            // 切换租户清空 账号 密码
            this.loginForm.username = ''
            this.loginForm.password = ''
        },
        // 上传成功回调
        handleUploadSuccess(response, file, fileList) {
            if(response.code === 0){
                this.loginConf.bgUrl = response.data
            }
        },
        remove() {
            this.loginConf.bgUrl = ''
        },
        handleUploadSuccessLogo(response,file, fileList) {
            if(response.code === 0){
                this.loginConf.iconImg = response.data
            }   
        },
        removeLogo() {
            this.loginConf.iconImg = ''
        },
         openIconsDialog(model) {
            this.iconsVisible = true
            this.currentIconModel = model
        },
        setIcon(val) {
            this.loginConf[this.currentIconModel] = val
        },
    }
}
</script>
<style lang='scss' scoped>
@import '@/styles/loginFrom';
</style>